{% extends 'base.html' %}
{% load static %}

{% block title %}标签模板管理{% endblock %}

{% block extra_css %}
<link href="{% static 'css/label-ui.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:asset_list' %}">资产管理</a></li>
            <li class="breadcrumb-item active">标签模板管理</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-8">
            <!-- 搜索和筛选 -->
            {% include 'assets/partials/search_card.html' with search_query=search_query %}
            
            <!-- 模板列表 -->
            {% if page_obj %}
                {% for template in page_obj %}
                    {% include 'assets/partials/template_card.html' with template=template %}
                {% endfor %}
                
                <!-- 分页 -->
                {% if page_obj.has_other_pages %}
                    <nav aria-label="模板分页" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}">首页</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">上一页</a>
                                </li>
                            {% endif %}
                            
                            <li class="page-item active">
                                <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                            </li>
                            
                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">下一页</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}">末页</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">暂无标签模板</h5>
                    <p class="text-muted">创建您的第一个标签模板</p>
                    <button type="button" class="btn btn-primary btn-custom" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
                        <i class="fas fa-plus me-2"></i>新建模板
                    </button>
                </div>
            {% endif %}
        </div>
        
        <div class="col-md-4">
            <!-- 快速创建 -->
            <div class="create-template-card">
                <h5 class="mb-3">
                    <i class="fas fa-magic me-2"></i>
                    快速创建模板
                </h5>
                <p class="mb-3">保存您常用的标签配置，提高打印效率</p>
                <button type="button" class="btn btn-light btn-custom" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
                    <i class="fas fa-plus me-2"></i>立即创建
                </button>
            </div>
            
            <!-- 使用说明 -->
            <div class="search-card">
                <h6 class="mb-3">
                    <i class="fas fa-info-circle text-primary me-2"></i>
                    使用说明
                </h6>
                
                <ul class="list-unstyled small">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        创建模板保存常用配置
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        设置默认模板快速使用
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        公共模板可供团队使用
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        支持多种标签尺寸和布局
                    </li>
                </ul>
            </div>
            
            <!-- 快捷操作 -->
            <div class="search-card">
                <h6 class="mb-3">
                    <i class="fas fa-bolt text-warning me-2"></i>
                    快捷操作
                </h6>
                
                <div class="d-grid gap-2">
                    <a href="{% url 'assets:asset_batch_print_labels' %}" class="btn btn-outline-primary btn-custom">
                        <i class="fas fa-print me-2"></i>批量打印标签
                    </a>
                    <button type="button" class="btn btn-primary btn-custom" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
                        <i class="fas fa-plus me-2"></i>新建模板
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 使用模板模态框 -->
<div class="modal fade" id="useTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">使用标签模板</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>请选择要打印标签的资产：</p>
                <div class="mb-3">
                    <label class="form-label">打印方式：</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="print_mode" id="single_asset" value="single">
                        <label class="form-check-label" for="single_asset">
                            单个资产打印
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="print_mode" id="batch_assets" value="batch" checked>
                        <label class="form-check-label" for="batch_assets">
                            批量资产打印
                        </label>
                    </div>
                </div>
                
                <div id="single-asset-input" style="display: none;">
                    <label class="form-label">资产编号：</label>
                    <input type="text" class="form-control" id="asset_number" placeholder="输入资产编号">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirm-use-template">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 创建模板模态框 -->
<div class="modal fade" id="createTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>创建标签模板
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="create-template-form">
                    {% csrf_token %}
                    
                    <div class="row">
                        <div class="col-md-8">
                            <!-- 基本信息 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle me-2"></i>基本信息
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">模板名称 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="create-template-name" name="name" required maxlength="100">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">模板描述</label>
                                            <textarea class="form-control" id="create-template-description" name="description" rows="3" maxlength="500"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 标签配置 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-cog me-2"></i>标签配置
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">标签尺寸</label>
                                            <select class="form-select" id="create-label-size" name="label_size">
                                                <option value="18mm">18mm - 小标签</option>
                                                <option value="24mm" selected>24mm - 中标签（推荐）</option>
                                                <option value="36mm">36mm - 大标签</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">页面布局</label>
                                            <select class="form-select" id="create-labels-per-page" name="labels_per_page">
                                                <option value="6">6个/页 (2×3)</option>
                                                <option value="12" selected>12个/页 (3×4)</option>
                                                <option value="24">24个/页 (4×6)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 内容选项 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-list-check me-2"></i>标签内容
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-include-qr" name="include_qr" checked>
                                                <label class="form-check-label" for="create-include-qr">
                                                    <i class="fas fa-qrcode me-2"></i>包含二维码
                                                </label>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-include-category" name="include_category" checked>
                                                <label class="form-check-label" for="create-include-category">
                                                    <i class="fas fa-tags me-2"></i>显示资产类别
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-include-department" name="include_department" checked>
                                                <label class="form-check-label" for="create-include-department">
                                                    <i class="fas fa-building me-2"></i>显示所属部门
                                                </label>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-include-user" name="include_user" checked>
                                                <label class="form-check-label" for="create-include-user">
                                                    <i class="fas fa-user me-2"></i>显示使用人
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 模板设置 -->
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-star me-2"></i>模板设置
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-is-public" name="is_public">
                                                <label class="form-check-label" for="create-is-public">
                                                    <i class="fas fa-globe me-2"></i>设为公共模板
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="create-is-default" name="is_default">
                                                <label class="form-check-label" for="create-is-default">
                                                    <i class="fas fa-star me-2"></i>设为默认模板
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <!-- 标签预览 -->
                            <div class="card">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-eye me-2"></i>标签预览
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="label-preview border rounded p-3 mb-3" id="create-label-preview">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div class="flex-grow-1">
                                                <div class="fw-bold mb-1 text-12">示例资产名称</div>
                                                <div class="text-muted mb-1 text-10">编号: AS001</div>
                                                <div class="text-muted mb-1 text-9" id="create-preview-category">类别: 电脑设备</div>
                                                <div class="text-muted mb-1 text-9" id="create-preview-department">部门: IT部门</div>
                                                <div class="text-muted text-9" id="create-preview-user">使用人: 张三</div>
                                            </div>
                                            <div class="ms-2" id="create-preview-qr">
                                                <div class="qr-placeholder">
                                                    QR
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <small class="text-muted">* 实际标签可能与预览略有差异</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>取消
                </button>
                <button type="button" class="btn btn-success" id="create-template-btn">
                    <i class="fas fa-plus me-2"></i>创建模板
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑模板模态框 -->
<div class="modal fade" id="editTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>编辑标签模板
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="edit-template-form">
                    {% csrf_token %}
                    <input type="hidden" id="edit-template-id" name="template_id">
                    
                    <div class="row">
                        <div class="col-md-8">
                            <!-- 基本信息 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle me-2"></i>基本信息
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">模板名称 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="edit-template-name" name="name" required maxlength="100">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">模板描述</label>
                                            <textarea class="form-control" id="edit-template-description" name="description" rows="3" maxlength="500"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 标签配置 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-cog me-2"></i>标签配置
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">标签尺寸</label>
                                            <select class="form-select" id="edit-label-size" name="label_size">
                                                <option value="18mm">18mm - 小标签</option>
                                                <option value="24mm">24mm - 中标签（推荐）</option>
                                                <option value="36mm">36mm - 大标签</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">页面布局</label>
                                            <select class="form-select" id="edit-labels-per-page" name="labels_per_page">
                                                <option value="6">6个/页 (2×3)</option>
                                                <option value="12">12个/页 (3×4)</option>
                                                <option value="24">24个/页 (4×6)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 内容选项 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-list-check me-2"></i>标签内容
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-include-qr" name="include_qr">
                                                <label class="form-check-label" for="edit-include-qr">
                                                    <i class="fas fa-qrcode me-2"></i>包含二维码
                                                </label>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-include-category" name="include_category">
                                                <label class="form-check-label" for="edit-include-category">
                                                    <i class="fas fa-tags me-2"></i>显示资产类别
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-include-department" name="include_department">
                                                <label class="form-check-label" for="edit-include-department">
                                                    <i class="fas fa-building me-2"></i>显示所属部门
                                                </label>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-include-user" name="include_user">
                                                <label class="form-check-label" for="edit-include-user">
                                                    <i class="fas fa-user me-2"></i>显示使用人
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 模板设置 -->
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-star me-2"></i>模板设置
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-is-public" name="is_public">
                                                <label class="form-check-label" for="edit-is-public">
                                                    <i class="fas fa-globe me-2"></i>设为公共模板
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="edit-is-default" name="is_default">
                                                <label class="form-check-label" for="edit-is-default">
                                                    <i class="fas fa-star me-2"></i>设为默认模板
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <!-- 标签预览 -->
                            <div class="card">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-eye me-2"></i>标签预览
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="label-preview border rounded p-3 mb-3" id="edit-label-preview" style="min-height: 120px; background: #f8f9fa;">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div class="flex-grow-1">
                                                <div class="fw-bold mb-1" style="font-size: 12px;">示例资产名称</div>
                                                <div class="text-muted mb-1" style="font-size: 10px;">编号: AS001</div>
                                                <div class="text-muted mb-1" style="font-size: 9px;" id="preview-category">类别: 电脑设备</div>
                                                <div class="text-muted mb-1" style="font-size: 9px;" id="preview-department">部门: IT部门</div>
                                                <div class="text-muted" style="font-size: 9px;" id="preview-user">使用人: 张三</div>
                                            </div>
                                            <div class="ms-2" id="preview-qr">
                                                <div class="border" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 8px; background: white;">
                                                    QR
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <small class="text-muted">* 实际标签可能与预览略有差异</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>取消
                </button>
                <button type="button" class="btn btn-primary" id="save-template-btn">
                    <i class="fas fa-save me-2"></i>保存更改
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>确认删除
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fas fa-trash-alt fa-3x text-danger mb-3"></i>
                    <h5>确定要删除模板吗？</h5>
                    <p class="text-muted mb-3">模板 "<span id="delete-template-name" class="fw-bold"></span>" 将被永久删除，此操作无法撤销。</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-info-circle me-2"></i>
                        删除后，使用此模板的打印历史记录将保留，但无法再使用此模板进行打印。
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>取消
                </button>
                <button type="button" class="btn btn-danger" id="confirm-delete-template">
                    <i class="fas fa-trash me-2"></i>确认删除
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/labels_admin.js' %}"></script>
{% endblock %}